<template>
  <div class="test">
    <div class="title">mapMutations方式</div>
    <div class="count">count的数值为：{{ $store.state.count }}</div>
    <el-button @click="handleAdd">+</el-button>
    <el-button @click="handleReduce">-</el-button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'TestIndex',
  data() {
    return {
      
    }
  },
  methods: {
    ...mapMutations(['updateCount']),
    handleAdd(){
      this.updateCount(this.$store.state.count + 1);
    },
    handleReduce(){
      this.updateCount(this.$store.state.count - 1);
    }
  }
}
</script>

<style lang="less" scoped>
.test{
  width: 100%;
  height: 100%;
  .title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .count{
    font-size: 16px;
    margin: 20px 0;
  }
}
</style>